<template>
  <div class="container">
    <div class="top">
      <swiper height="4rem" :auto="true" :loop="true" dots-position="center" :interval=2000>
        <swiper-item :key="index" @click.native="show(index)" v-for="(item,index) in banner">
          <img class="img_item" :src="item.url" alt="">
        </swiper-item>
      </swiper>
      <div class="top_desc flex-row">
        <div class="flex-grow-0">
          返回
        </div>
        <div class="flex-grow-1">
          <p>{{details.Community}}</p>
          <p>更新时间{{details.update_time}}</p>
        </div>
        <div class="flex-grow-0">
          收藏
        </div>
      </div>
    </div>
    <div class="details_box">
      <div class="houseInfo flex-row">
        <div class="flex-grow-1 ">
          <div class="tt">售价</div>
          <div class="data">{{details.dan_price}}</div>
        </div>
        <div class="flex-grow-1 huxing">
          <div class="tt">户型</div>
          <div class="data">{{details.jifang}}</div>
        </div>
        <div class="flex-grow-1">
          <div class="tt">面积</div>
          <div class="data">{{details.AreaStr}}m2</div>
        </div>
      </div>
      <div class="base-info-content">
        <ul class="clearfix">
          <li class="base-info-li">单价：<span>4087.59元/㎡</span></li>
          <li class="base-info-li"><a
                  href="https://tool.fooww.com/calculator/mobile/?price=56&amp;themeColor=3492e9"><span>房贷计算器</span>
          </a></li>
          <li class="base-info-li">装修：<span>毛坯</span></li>
          <li class="base-info-li">楼层：<span>3层以下</span></li>
          <li class="base-info-li">朝向：<span>南北</span></li>
          <li class="base-info-li">年代：<span>2010</span></li>
          <li class="base-info-li">区县：<span>孝南／孝南城区</span></li>
          <li class="base-info-li">编号：<span>00035</span></li>
          <li class="base-info-li">车库：<span></span></li>
        </ul>
        <div class="detail-tags list-style">
        </div>
      </div>
    </div>
    <div class="info-description">备注：<span>该户型坐北朝南，客厅通阳台，光线佳，通透性好。总层数7楼位于3楼，黄金好楼层，毛坯房可以按自己的风格装修。</span></div>
    <div v-transfer-dom>
      <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
    </div>
  </div>
</template>

<script>
  import MDUtils from 'src/assets/js/md-utils'
  import {URI_GETHOUSEDETAILS} from 'src/const/shareUri'
  import {Swiper, SwiperItem, Previewer, TransferDom} from 'vux'

  export default {
    directives: {TransferDom},
    name: "HouseDetails",
    components: {Swiper, SwiperItem, Previewer},
    data() {
      return {
        list: [{
          msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
          src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
          w: 800,
          h: 400
        },
          {
            msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
            src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
            w: 1200,
            h: 900
          }, {
            msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwwcynw2j20p00b4js9.jpg',
            src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwwcynw2j20p00b4js9.jpg'
          }],
        banner: [],
        details: {},
        options: {
          getThumbBoundsFn (index) {
            // find thumbnail element
            let thumbnail = document.querySelectorAll('.previewer-demo-img')[index];
            // get window scroll Y
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
            // optionally get horizontal scroll
            // get position of element relative to viewport
            let rect = thumbnail.getBoundingClientRect();
            // w = width
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            // Good guide on how to get element coordinates:
            // http://javascript.info/tutorial/coordinates
          }
        },
      }
    },
    created() {
      this.initdata();
    },
    methods: {
      initdata() {
        this.$ajax.get(URI_GETHOUSEDETAILS, {
          id: MDUtils.getQueryParam('id')
        }, res => {
          console.log(res);
          this.banner = res.data.banner;
          this.details = res.data.details;
        });
      },
      logIndexChange(arg) {
        console.log(arg)
      },
      show(index) {
        this.$refs.previewer.show(index)
      }
    }
  }
</script>
<style>
  body {
    background: #ececec;
  }
</style>
<style lang="less" scoped>
  .top {
    padding: .2rem;
    background: #fff;
  }

  .img_item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .details_box {
    background: #fff;
    margin-top: .2rem;
    margin-bottom: .2rem;
    .houseInfo {
      text-align: center;
      padding: .3rem 0;
      border-bottom: 1px solid #eee;
      .huxing {
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
      }
      .tt {
        margin-bottom: .05rem;
        font-size: .28rem;
        color: #999;
      }
      .data {
        height: 16px;
        line-height: 16px;
        color: #ef2520;
        font-size: 16px;
      }
    }
    .base-info-content {
      padding: 10px;
      .base-info-li {
        float: left;
        width: 50%;
        height: 26px;
        line-height: 26px;
        font-size: 14px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span {
          color: #333;
        }
      }
    }
  }

  .info-description {
    padding: 10px;
    color: #999;
    font-size: 14px;
    line-height: 22px;
    background: #fff;
  }
</style>